<script setup lang="ts">

import Card from "@/components/Card.vue";
import {ref} from "vue";
import Child from "@/components/Child.vue";
import ModelArg from "@/components/ModelArg.vue";
import ModelMulti from "@/components/ModelMulti.vue";

const count = ref(0);
const count2 = ref(0);
const firstName = ref('');
const lastName = ref('');
</script>

<template>
  <card title="组件的双向绑定">
    <p>从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：</p>
    <p>父组件：{{ count }}</p>
    <child v-model="count"/>
  </card>
  <card title="v-model 的参数">
    <p>父组件：{{ count2 }}</p>
    <model-arg v-model:title="count2"/>
  </card>

  <card title="多个 v-model 绑定">
    <p>父组件：{{ firstName }}  {{ lastName}}</p>
    <model-multi v-model:firstName="firstName" v-model:lastName="lastName" />
  </card>
  <card title="多个 v-model 绑定--修饰符">
    <p>父组件：{{ firstName }}  {{ lastName}}</p>
    <model-multi v-model:firstName="firstName" v-model:lastName.capitalize="lastName" />
  </card>
</template>

<style scoped>

</style>